import { NavBar, Button, Grid, Card } from "antd-mobile";
import {
  CalendarOutline,
  PayCircleOutline,
  MessageOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useState } from "react";
import "./sy.css";
import syimg from "../../assets/sy.png";
import { useNavigate } from "react-router-dom";

function Index() {
  const nav = useNavigate();
  // 当前激活的tab状态
  const [activeTab, setActiveTab] = useState("outpatient");
  // 当前激活的底部导航状态
  const [activeBottomTab, setActiveBottomTab] = useState("home");
  const handleServiceClick = (service: string) => {
    console.log("点击服务:", service);
    if (service === "门诊报告") {
      nav("/mz");
      return;
    }
    if (service === "住院报告") {
      nav("/zhu");
      return;
    }
  };

  const handleQuickAccess = (type: string) => {
    console.log("快速访问:", type);
    if (type === "registration") {
      // 跳转到sy3页面（医生列表）
      nav("/xu");
    } else if (type === "payment") {
      // 跳转到zhi页面（确认缴费）
      nav("/men");
    }
  };

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    console.log("切换标签:", tab);
  };

  const handleFloatingService = () => {
    console.log("智能客服");
  };

  const handleBottomTabClick = (tabId: string) => {
    setActiveBottomTab(tabId);
    console.log("切换底部标签:", tabId);

    // 根据不同的tab进行路由导航
    switch (tabId) {
      case "home":
        // 当前页面，不需要导航
        break;
      case "website":
        // 导航到微官网页面
        // nav('/website');
        break;
      case "message":
        // 导航到消息中心页面
        // nav('/message');
        break;
      case "profile":
        // 导航到我的页面
        // nav('/profile');
        break;
      default:
        break;
    }
  };

  // 不同tab的服务数据
  const servicesData = {
    outpatient: [
      { name: "门诊报告", icon: "📋" },
      { name: "候诊查询", icon: "⏰" },
      { name: "自助开单", icon: "📝" },
      { name: "医技预约", icon: "🔬" },
      { name: "我的复诊", icon: "🔄" },
      { name: "自助取号", icon: "🎫" },
      { name: "门诊导诊单", icon: "🗺️" },
      { name: "电子票据", icon: "🧾" },
    ],
    inpatient: [
      { name: "住院报告", icon: "🏥" },
      { name: "床位查询", icon: "🛏️" },
      { name: "费用查询", icon: "💰" },
      { name: "探视预约", icon: "👥" },
      { name: "出院办理", icon: "🚪" },
      { name: "住院清单", icon: "📄" },
      { name: "护理记录", icon: "👩‍⚕️" },
      { name: "用药记录", icon: "💊" },
    ],
    comprehensive: [
      { name: "体检预约", icon: "🩺" },
      { name: "健康档案", icon: "📁" },
      { name: "疫苗接种", icon: "💉" },
      { name: "健康咨询", icon: "💬" },
      { name: "慢病管理", icon: "🔄" },
      { name: "家庭医生", icon: "👨‍⚕️" },
      { name: "急救服务", icon: "🚑" },
      { name: "健康评估", icon: "📊" },
    ],
  };

  // 获取当前tab的服务数据
  const currentServices = servicesData[activeTab as keyof typeof servicesData];

  return (
    <div className="sy-container">
      {/* 顶部导航栏 */}
      <NavBar className="sy-navbar">智慧医院平台</NavBar>

      {/* 主横幅区域 */}
      <div className="hero-banner">
        <img src={syimg} alt="" style={{ width: "100%", height: "100%" }} />
      </div>

      {/* 快速访问按钮 */}
      <div className="quick-access">
        <Button
          className="quick-btn registration-btn"
          onClick={() => handleQuickAccess("registration")} >
          <div className="btn-content">
            <CalendarOutline fontSize={24} />
            <div className="btn-text">
              <div className="btn-title">门诊挂号</div>
              <div className="btn-subtitle">便捷预约挂号</div>
            </div>
          </div>
        </Button>

        <Button
          className="quick-btn payment-btn"
          onClick={() => handleQuickAccess("payment")}
        >
          <div className="btn-content">
            <PayCircleOutline fontSize={24} />
            <div className="btn-text">
              <div className="btn-title">门诊缴费</div>
              <div className="btn-subtitle">便捷预约挂号</div>
            </div>
          </div>
        </Button>
      </div>

      {/* 公告栏 */}
      <div className="announcement-bar">
        <span className="announcement-label">公告</span>
        <span className="announcement-text">智慧医院即将上线通知</span>
      </div>

      {/* 标签导航 */}
      <div className="tab-navigation">
        <div className="tabs">
          <div
            className={`tab ${activeTab === "outpatient" ? "active" : ""}`}
            onClick={() => handleTabChange("outpatient")}
          >
            门诊
          </div>
          <div
            className={`tab ${activeTab === "inpatient" ? "active" : ""}`}
            onClick={() => handleTabChange("inpatient")}
          >
            住院
          </div>
          <div
            className={`tab ${activeTab === "comprehensive" ? "active" : ""}`}
            onClick={() => handleTabChange("comprehensive")}
          >
            综合
          </div>
        </div>
        <div className="more-link">更多</div>
      </div>

      {/* 服务网格 */}
      <div className="service-grid">
        <Grid columns={4} gap={16}>
          {currentServices.map((service, index) => (
            <Grid.Item key={index}>
              <div
                className="service-item"
                onClick={() => handleServiceClick(service.name)}
              >
                <div className="service-icon">{service.icon}</div>
                <div className="service-name">{service.name}</div>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>

      {/* 悬浮智能客服按钮 */}
      <div className="floating-service">
        <div className="floating-ball" onClick={handleFloatingService}>
          <div className="ball-text" onClick={() => nav("/AI")}>
            客服智能
          </div>
        </div>
      </div>

      {/* 健康资讯区域 */}
      <div className="health-info">
        <h3 className="info-title">健康资讯</h3>
        <Card className="news-card">
          <div className="news-content">
            <div className="news-text">世界糖尿病日,应该注意什么</div>
            <div className="news-image-placeholder">📰</div>
          </div>
        </Card>
      </div>

      {/* 底部导航栏 */}
      <div className="bottom-navigation">
        <div
          className={`nav-item ${activeBottomTab === "home" ? "active" : ""}`}
          onClick={() => handleBottomTabClick("home")}
        >
          <div className="nav-icon">🏠</div>
          <span>诊疗首页</span>
        </div>
        <div
          className={`nav-item ${
            activeBottomTab === "website" ? "active" : ""
          }`}
          onClick={() => handleBottomTabClick("website")}
        >
          <div className="nav-icon">☁️</div>
          <span>微官网</span>
        </div>
        <div
          className={`nav-item ${
            activeBottomTab === "message" ? "active" : ""
          }`}
          onClick={() => handleBottomTabClick("message")}
        >
          <MessageOutline fontSize={20} />
          <span>消息中心</span>
        </div>
        <div
          className={`nav-item ${
            activeBottomTab === "profile" ? "active" : ""
          }`}
          onClick={() => handleBottomTabClick("profile")}
        >
          <UserOutline fontSize={20} />
          <span>我的</span>
        </div>
      </div>
    </div>
  );
}

export default Index;
